feat(search): use new Orama components #8175

micheleriva · 2025-09-23T12:41:48Z

This PR supersedes #7971 and integrates the new Orama components, powered by the new OramaCore backend.

Description

New components - React-based to replace the old WebComponents-based ones. New backend (OramaCore instead of old Orama Cloud), all hosted and maintained on https://app.orama.com. Credentials have been shared privately with the repository maintainers on Slack.

Validation

Tested locally and on remote demo environment.

Related Issues

Check List

I have read the Contributing Guidelines and made commit messages that follow the guideline.
I have run pnpm format to ensure the code follows the style guide.
I have run pnpm test to check if all tests are passing.
I have run pnpm build to check if the website builds without errors.
I've covered new added functionality with unit tests if necessary.

Co-authored-by: Aviv Keller <[email protected]> Signed-off-by: Aileen Villanueva Lecuona <[email protected]>

g-francesca · 2025-10-23T12:12:23Z

@g-francesca Could you please:

Resolve the Playwright issues

Resolve any conflicts (Maybe merging your commits will help with that, 110 is quite a lot 😅)

🙂 Sure, I'll manage this today @avivkeller.
About the Playwright tests:
I noticed they’re currently failing in CI because the Orama env vars (used to initialize the client) aren’t defined during the test step. Since we made the search button disabled whenever these variables are missing, the tests pass locally, but fail in GitHub Actions, as the button can’t be clicked.

Before I update the workflow to include them, could you confirm whether the variables below are already set as secrets? And if there's any distinction between those used in prod and preview environments that I should take into account?

Would the following update to the test step look correct to you?

      - name: Run Playwright tests
        working-directory: apps/site
        run: node --run playwright
        env:
          PLAYWRIGHT_BASE_URL: ${{ needs.get-vercel-preview.outputs.url }}
          NEXT_PUBLIC_NEW_ORAMA_PROJECT_ID: ${{ github.event_name == 'push' && secrets.NEXT_PUBLIC_NEW_ORAMA_PRODUCTION_PROJECT_ID || secrets.NEXT_PUBLIC_NEW_ORAMA_PROJECT_ID }}
          NEXT_PUBLIC_NEW_ORAMA_API_KEY: ${{ github.event_name == 'push' && secrets.NEXT_PUBLIC_NEW_ORAMA_PRODUCTION_API_KEY || secrets.NEXT_PUBLIC_NEW_ORAMA_API_KEY }}

Thank you!

ovflowd · 2025-10-23T13:21:22Z

@avivkeller would the GHA snippet above be OK?

avivkeller · 2025-10-23T20:01:46Z

(Forget my deleted comment above)

No, the snippet does not look good to me. Playwright should run without secrets. We could just remove the Orama tests, and accept that this is a third-party provider not subject to our tests.

avivkeller · 2025-10-23T20:02:50Z

The "Sync Orama Cloud" test is an expected failure given the changes, but can someone confirm that a local call of that script works with the secrets defined?

If not, I can make a temporary branch to test it.

g-francesca · 2025-10-28T17:43:55Z

(Forget my deleted comment above)

No, the snippet does not look good to me. Playwright should run without secrets. We could just remove the Orama tests, and accept that this is a third-party provider not subject to our tests.

Makes sense for me, I can remove the Orama tests

ovflowd · 2025-10-30T13:13:22Z

apps/site/components/Common/Searchbox/ChatInput/index.tsx

+  const hasInteractions = !!interactions?.length;
+
+  useEffect(() => {
+    setTimeout(() => {


Please also add a cleanup function of the effect to cancel the setTimeout during component unmount.

ovflowd · 2025-10-30T13:17:58Z

apps/site/components/Common/Searchbox/index.tsx

+  const displaySearch =
+    !isMobileScreen || (isMobileScreen && searchbox.mode === 'search');
+
+  useEffect(() => {


Could we please use our existing useMediaQuery hook here? https://github.com/nodejs/nodejs.org/blob/main/apps/site/hooks/react-client/useMediaQuery.ts instead of this isMobileScreen state

ovflowd · 2025-10-30T13:18:22Z

apps/site/components/Common/Searchbox/index.tsx

+import { Search } from './Search';
+import { SlidingChatPanel } from './SlidingChatPanel';
+
+const InnerSearchboxModal: FC<PropsWithChildren<{ onClose: () => void }>> = ({


This component should reside in another file. Policy here is one component per file :)

ovflowd · 2025-10-30T13:19:01Z

apps/site/components/Common/Searchbox/index.tsx

+  const orama = useOrama();
+  const t = useTranslations();
+
+  useEffect(() => {


For the sake of reusability and maintainability could you make a dedicated hook for this? Or use an existing Radix component that could do this? I feel I've mentioned this before?

ovflowd · 2025-10-30T13:19:58Z

apps/site/providers/oramaProvider.tsx

+        apiKey: ORAMA_CLOUD_READ_API_KEY,
+      });
+    }
+    return null;


No need to return null. Make the context be OramaCloud | undefined, createContext by default supports "undefiend", so you only need one return statement.

ovflowd · 2025-10-30T13:20:46Z

apps/site/providers/oramaProvider.tsx

+
+export const OramaProvider = ({ children }: { children: React.ReactNode }) => {
+  const instance = useMemo(() => {
+    if (ORAMA_CLOUD_PROJECT_ID && ORAMA_CLOUD_READ_API_KEY) {


Since these constants are defined statically and won't change during runtime, wouldn't it make sense to create the instance outside of the provider? Does it need to be a react provider? Is it because we want to ensure this is client-side only?

ovflowd · 2025-10-30T13:21:05Z

apps/site/providers/oramaProvider.tsx

Please add 'use client';, React Providers are client-side only and we rather be explicit when something is client-side only.

ovflowd · 2025-10-30T13:21:55Z

apps/site/providers/searchboxProvider.tsx

+
+export const useSearchbox = (): SearchboxContextType => {
+  const context = useContext(SearchboxContext);
+  if (!context) {


No need to throw an Error explicitly. It will throw an error for whoever is consuming this anyways.

ovflowd · 2025-10-30T13:22:34Z

apps/site/providers/searchboxProvider.tsx

+  const searchDispatch = useSearchDispatch();
+
+  const clearAll = useCallback(() => {
+    searchDispatch({ type: 'SET_SEARCH_TERM', payload: { searchTerm: '' } });


Couldn't you make this an entry on your reducer named CLEAR_ALL?

ovflowd

We're almost there. I've left a final set of comments. After this we're good to go!

g-francesca · 2025-10-30T16:46:24Z

We're almost there. I've left a final set of comments. After this we're good to go!

Hey @ovflowd, thank you for this last review! I'll try to manage everything by tomorrow. I'll keep you posted.

g-francesca and others added 30 commits July 9, 2025 11:54

feat: add new searchbox - initial setup

7c4f8e5

style: search button

e4d0c1d

style: searchbox empty state

086dd84

style: modal search

8451f80

style: prompt wrapper

8ecdf9e

fix: layout sliding panel

6ac3d65

style: chat sources

87db2f9

refactor: search component

40ea1c8

feat: add translations for search component

31273fd

update orama core and update logo

31e2db8

update sync

2a22940

update pnpm-lock

65ecd9f

Update apps/site/components/Common/Searchbox/Chat.tsx

834636f

Co-authored-by: Aviv Keller <[email protected]> Signed-off-by: Aileen Villanueva Lecuona <[email protected]>

Update apps/site/components/Common/Searchbox/Chat.tsx

f088203

Co-authored-by: Aviv Keller <[email protected]> Signed-off-by: Aileen Villanueva Lecuona <[email protected]>

Update apps/site/components/Common/Searchbox/Search.tsx

3d582dd

Co-authored-by: Aviv Keller <[email protected]> Signed-off-by: Aileen Villanueva Lecuona <[email protected]>

Update apps/site/components/Common/Searchbox/Search.tsx

b1fff6a

Co-authored-by: Aviv Keller <[email protected]> Signed-off-by: Aileen Villanueva Lecuona <[email protected]>

Update apps/site/components/Common/Searchbox/Search.tsx

e09fa32

Co-authored-by: Aviv Keller <[email protected]> Signed-off-by: Aileen Villanueva Lecuona <[email protected]>

fix height and pr comments

d37297f

Merge branch 'main' of https://github.com/oramasearch/nodejs.org

954ee99

fix import and add directories for Search and Chat

ff59f5b

update icon and orama ui components

8d7657e

rollback translation changes

43c56bd

update on datasource and ui components

83a0c1b

update env variables

f4e51bf

pr comments and facets added

242c667

pr comments

535d6a8

fixes in styles and facets

992f1fe

facets search fix

d73687a

push facets query fix

e7a64b9

feat: adds filters to search

dbd4637

g-francesca added 2 commits October 23, 2025 14:19

Merge remote-tracking branch 'upstream/main'

1d7016a

Merge branch 'main' into review-orama-searchbox

17b9e26

vercel bot deployed to Preview October 23, 2025 12:35 View deployment

avivkeller added the github_actions:pull-request Trigger Pull Request Checks label Oct 23, 2025

avivkeller deployed to Storybook October 23, 2025 20:00 — with GitHub Actions View deployment

github-actions bot removed the github_actions:pull-request Trigger Pull Request Checks label Oct 23, 2025

fix: remove orama tests

0299d36

vercel bot deployed to Preview October 28, 2025 17:48 View deployment

g-francesca added 2 commits October 29, 2025 10:47

Merge remote-tracking branch 'upstream/main'

fd57021

Merge branch 'main' into review-orama-searchbox

49c409e

vercel bot deployed to Preview October 29, 2025 09:54 View deployment

ovflowd added the github_actions:pull-request Trigger Pull Request Checks label Oct 30, 2025

ovflowd deployed to Storybook October 30, 2025 13:07 — with GitHub Actions View deployment

github-actions bot removed the github_actions:pull-request Trigger Pull Request Checks label Oct 30, 2025

ovflowd reviewed Oct 30, 2025

View reviewed changes

Uh oh!

feat(search): use new Orama components #8175

Are you sure you want to change the base?

feat(search): use new Orama components #8175

Uh oh!

Conversation

micheleriva commented Sep 23, 2025

Description

Validation

Related Issues

Check List

Uh oh!

g-francesca commented Oct 23, 2025

Uh oh!

ovflowd commented Oct 23, 2025

Uh oh!

avivkeller commented Oct 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

avivkeller commented Oct 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

g-francesca commented Oct 28, 2025

Uh oh!

ovflowd Oct 30, 2025

Choose a reason for hiding this comment

Uh oh!

ovflowd Oct 30, 2025

Choose a reason for hiding this comment

Uh oh!

ovflowd Oct 30, 2025

Choose a reason for hiding this comment

Uh oh!

ovflowd Oct 30, 2025

Choose a reason for hiding this comment

Uh oh!

ovflowd Oct 30, 2025

Choose a reason for hiding this comment

Uh oh!

ovflowd Oct 30, 2025

Choose a reason for hiding this comment

Uh oh!

ovflowd Oct 30, 2025

Choose a reason for hiding this comment

Uh oh!

ovflowd Oct 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ovflowd Oct 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ovflowd left a comment

Choose a reason for hiding this comment

Uh oh!

g-francesca commented Oct 30, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

avivkeller commented Oct 23, 2025 •

edited

Loading

avivkeller commented Oct 23, 2025 •

edited

Loading

ovflowd Oct 30, 2025 •

edited

Loading

ovflowd Oct 30, 2025 •

edited

Loading